<style scoped>
  .weui-btn-area {
    margin: 2em 15px 0.3em;
  }

  .weui-btn {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    line-height: 2.55555556;
    border-radius: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
  }

  .weui-btn_primary {
    background-color: #009e4c;
  }
</style>
<template>
  <form id="feedback-form">
    <div class="textAreaBox">
      <textarea rows="8" placeholder="意见或者建议"
                v-model="opinionText" @blur="vaildForm($event.target)"
                required tips="意见或者建议" maxlength="150"></textarea>
      <p class="letterNum">{{surplus}}/150</p>
    </div>
    <div class="upload-img-box">
      <div class="add-imgBox" v-for="(item, index) of opinionImgs">
        <img :src="item" alt="上传的图片" @click="previewImg(img)">
        <i class="ion ion-ios-close" @click="delImg(index)"></i>
      </div>
      <a href="javascript:;" class="btn-addImg" @click="getImg" v-if="opinionImgs.length < 6"></a>
    </div>
    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" href="javascript:;" @click="postFeedbackForm">提交</a>
    </div>
    <!--正在加载提示框-->
    <loading v-if="loadShow"></loading>
    <!--加载失败弹框-->
    <dialog-box :message="dialogMessage" v-if="dialogShow" @close-dialog="closeDialog"
                @cancle-dialog="closeDialog"></dialog-box>
    <!--表单发送成功提示框-->
    <toast :message="toastMessage" v-show="toastShow"></toast>
    <!--表单验证是的提示框-->
    <transition name="slide">
      <tips v-show="tipsShow" :tips="tipsMessage"></tips>
    </transition>
  </form>
</template>
<script>
  //  import wx from 'weixin-js-sdk'
  import jssdk from '../../assets/js/jssdk/wxJSSDK'
  import '../../assets/css/feedbackForm.scss';
  import interfaceAPI from '../../assets/js/insterface.js';
  import http from '../../assets/js/http_mixin'
  import getQuery from '../../assets/js/get_querys'
  import vaild from '../../assets/js/vaild_form'
  var feedbackFormUrl = interfaceAPI.feedbackFormUrl;
  var searchFeedEmpName = interfaceAPI.searchFeedEmpName;
  export default {
    data(){
      return {
        'personalId': '',
        'opinionText': '',          // 用户输入的文本
        'opinionImgs': [],          // 图片
        'missImgs': [],              // 发送给后台的图片地址
        'submitter': '',             // 用来接收提交的人的名字
        'idx': 0
      }
    },
    computed: {
      surplus(){
        return 150 - this.opinionText.length;
      }
    },
    mixins: [http, getQuery, vaild, jssdk],
    methods: {
      // 获取提交意见的人的名字
      getFeedEmpName(){
        this.getInfo({
          url: searchFeedEmpName,
          param: {
            'empNo': this.$route.query.empNo
          },
          success: function (response) {
            this.submitter = response.body.data.employeeName;
          },
          fail: function (response) {
            this.dialogMessage = '请求失败，请稍后再试';
            this.dialogShow = true;
          }
        });
      },
      // 发送表单
      postFeedbackForm(){
        // 发送表单信息
        this.getInfo({
          url: feedbackFormUrl,
          param: {
            'empNo': this.$route.query.empNo,
            'submitter': this.submitter,
            'content': this.opinionText,
            'imgIds': this.missImgs.join(',')
          },
          success: function (response) {
            var _this = this;
            this.toastMessage = '已完成';
            this.toastShow = true;
            window.setTimeout(function () {
              _this.$router.push({path: 'feedbacklist', query: {empNo: _this.personalId}});
            })
          },
          fail: function (response) {
            this.dialogMessage = '请求失败，请稍后再试';
            this.dialogShow = true;
          }
        });
      },
      // 选取图片
      getImg(){
        var _this = this;
        var chooseImageID = [];
        this.imageApi({
          chooseImage: {
            count: 6 - _this.opinionImgs.length,
            success: function (res) {
              chooseImageID = res.localIds;
              for (var i = 0; i < chooseImageID.length; i++) {
                _this.opinionImgs.push(chooseImageID[i]);
              }
              _this.syncUpload(chooseImageID);
            }
          }
        })
      },
      // 预览图片
      previewImg(img){
        var _this = this;
        this.imageApi({
          previewImage: {
            current: img,
            urls: _this.opinionImgs
          }
        })
      },
      // 上传图片
      syncUpload(localIds){
        var _this = this;
        this.imageApi({
          uploadImage: {
            localId: localIds[_this.idx].toString(),
            success: function (res) {
              _this.idx++;
              _this.missImgs.push(res.serverId);
              if (_this.idx < localIds.length) {
                _this.syncUpload(localIds);
              } else {
                _this.idx = 0;
              }
            }
          }
        })
      },
      delImg(index){
        this.missImgs.splice(index, 1);
        this.opinionImgs.splice(index, 1);
      }
    },
    mounted(){
      this.init();
      document.title = '意见反馈';
      var query = this.getQuerys();
      this.personalId = query.empNo;
      this.getFeedEmpName();
    }
  }
</script>
